<template>
  <div class="mainBox">
    <div class="routerMsg">{{ routerMsg }}</div>
    <div class="container">
      <div class="searchBox">
        <div class="search1">
          <el-input
            placeholder="企业名称/负责人/电话"
            prefix-icon="el-icon-search"
            v-model="searchObj.enterpriseName"
          >
          </el-input>
        </div>
        <div class="search1">
          <el-select
            v-model="searchObj.emergencySceneCode"
            placeholder="应急场景"
          >
            <el-option
              v-for="item in emergencySceneCodeList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search1">
          <el-cascader
            placeholder="行政区域"
            v-model="searchObj.areaCode"
            :props="{
              value: 'areaCode',
              label: 'areaName',
              children: 'platformAreaCodeVoList',
            }"
            :options="areaList"
            @change="chooseAreaCode"
          ></el-cascader>
        </div>
        <div class="search1">
          <el-select v-model="searchObj.stopStatus" placeholder="企业停工状态">
            <el-option
              v-for="item in stop_statusList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </div>
        <div class="search1">
          <el-select
            v-model="searchObj.industryCategory"
            placeholder="所属行业"
          >
            <el-option
              v-for="item in industryCategoryList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </div>
        <div class="searchBtn">
          <el-button @click="searchList"> 查 询 </el-button>
        </div>
        <div class="searchBtn">
          <el-button class="reset" @click="resetSearch"> 重 置 </el-button>
        </div>
      </div>
      <div class="btnBox">
        <div class="addBtn">
          <el-button type="success" @click="addCompany('')">添加企业</el-button>
        </div>
        <div class="uploadBtn">
          <label for="input-button" class="inputBox"> 导入 </label>
          <input
            id="input-button"
            type="file"
            accept=".xlsx,.xls"
            @change="importGeneral"
            style="display: none"
          />
        </div>
        <div class="addBtn">
          <el-button type="success" @click="exportGeneral">导 出</el-button>
        </div>
        <div class="addBtn">
          <el-button type="success" @click="uploadExcel">模版下载</el-button>
        </div>
      </div>
      <div class="tableBox">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="enterpriseName"
            label="企业名称"
            width="260"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="legalRepresentative"
            label="实际控制人"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="contactNumber"
            label="实际控制人电话"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="areaCodeName"
            label="区域"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="industryCategoryName"
            label="所属行业"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="emergencySceneCodeName"
            label="应急场景"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="stopStatusName"
            label="企业停工状态"
          >
          </el-table-column>
          <el-table-column
            width="220px"
            align="center"
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                style="color: #269e8f"
                type="text"
                @click="addCompany(scope.row)"
                >编辑</el-button
              >
              <el-button
                style="color: #269e8f"
                type="text"
                @click="addCompany(scope.row, 'see')"
                >详情</el-button
              >
              <el-button
                style="color: #2bbfe8"
                type="text"
                @click="goDetail(scope.row)"
                >个性数据</el-button
              >
              <el-button style="color: #f56c6c" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page.sync="params.pageNum"
          :page-size.sync="params.pageSize"
          :page-sizes="[10, 30, 50]"
          background
          layout="slot, sizes, prev, pager, next"
          :total="totalItemCount"
          @current-change="currentPage"
          @size-change="handleSizeChange"
        >
          <span class="totalNum" key="1">共 {{ totalItemCount }} 条数据</span>
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1218px"
      :before-close="handleClose"
      :show-close="false"
      :append-to-body="true"
      custom-class="dialogCompany"
    >
      <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
      <div class="dialogForm">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="200px"
          :inline="true"
        >
          <div class="formBox">
            <div class="formItem">
              <div class="left">
                <el-form-item label="企业名称">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.enterpriseName"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="企业编码">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.identificationCode"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="应急场景">
                  <el-select
                    v-model="form.emergencySceneCode"
                    placeholder="请选择"
                    :disabled="seeForm"
                  >
                    <el-option
                      v-for="item in emergencySceneCodeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="所属行业">
                  <el-select
                    v-model="form.industryCategory"
                    placeholder="请选择"
                    :disabled="seeForm"
                  >
                    <el-option
                      v-for="item in industryCategoryList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="统一社会信用代码">
                  <el-input
                    placeholder="请输入"
                    v-model="form.uniscId"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="行政区域名称">
                  <el-cascader
                    v-model="form.areaCode"
                    :props="{
                      value: 'areaCode',
                      label: 'areaName',
                      children: 'platformAreaCodeVoList',
                      emitPath: false,
                    }"
                    :disabled="seeForm"
                    :options="areaList"
                    @change="chooseAreaCode"
                  ></el-cascader>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="营业状态">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.businessStatus"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in business_statusList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="主营业务">
                  <el-input
                    placeholder="请输入"
                    v-model="form.opScope"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="生产经营方式">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.productionMode"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in production_modeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="企业规模">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.companyScale"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in company_scaleList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="行政隶属关系">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.administrativeSubOrdination"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in administrative_subordinationList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="是否在工业园区内">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.inIndustriaPark"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in in_industry_parkList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="国民经济类型">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.registrationType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in registration_typeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="所属工业园区名称">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.industriaParkName"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="经度">
                  <el-input
                    :disabled="seeForm"
                    type="number"
                    placeholder="请输入"
                    v-model="form.longitude"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="纬度">
                  <el-input
                    :disabled="seeForm"
                    type="number"
                    placeholder="请输入"
                    v-model="form.latitude"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="实际控制人">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.legalRepresentative"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="经营地址">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.addressOperating"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="安全生产管理负责人">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.safetyProductionManagementName"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="实际控制人电话">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.contactNumber"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="安全生产管理负责人电话">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.safetyProductionManagementNumber"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="企业停工状态">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.stopStatus"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in stop_statusList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          :disabled="seeForm"
          class="leftCancel"
          type="primary"
          @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  dict,
  areaDict,
  addForm,
  pageList,
  commonDataInfoDetail,
  updateForm,
  exportCommonDataInfo,
  downloadTemplate,
  uploadCommonDataInfo,
} from '@/api/generalInformation'
import FileSaver from 'file-saver'
export default {
  name: 'generalInformation',
  props: {},
  components: {},
  data() {
    return {
      routerMsg: '',
      dialogVisible: false,
      form: {
        enterpriseName: '',
        industryCategory: '',
        emergencySceneCode: '',
        areaCode: '',
        uniscId: '',
        opScope: '',
        productionMode: '',
        inIndustriaPark: '',
        administrativeSubOrdination: '',
        registrationType: '',
        longitude: '',
        addressOperating: '',
        legalRepresentative: '',
        latitude: '',
        safetyProductionManagementName: '',
        contactNumber: '',
        safetyProductionManagementNumber: '',
        companyScale: '',
        stopStatus: '',
      },
      industryCategoryList: [],
      emergencySceneCodeList: [],
      areaList: [],
      business_statusList: [],
      company_scaleList: [],
      production_modeList: [],
      in_industry_parkList: [],
      administrative_subordinationList: [],
      stop_statusList: [],
      registration_typeList: [],
      rules: {
        age: [
          { required: true, message: 'age is required' },
          { type: 'number', message: 'age must be a number' },
        ],
      },
      searchObj: {
        enterpriseName: '',
        emergencySceneCode: '',
        stopStatus: '',
        industryCategory: '',
        areaCode: '',
      },
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      totalItemCount: null,
      dialogTitle: '新增企业共性数据',
      seeForm: false,
    }
  },
  created() {
    this.pageList(this.params)
    this.emergencySceneCodeDict('emergency_scene_code')
    this.areaDict()
    this.stop_statusDict('stop_status')
    this.industryCategoryDict('industry_category')
    this.business_statusDict('business_status')
    this.company_scaleDict('company_scale')
    this.production_modeDict('production_mode')
    this.in_industry_parkDict('in_industria_park')
    this.administrative_subordinationDict('administrative_sub_ordination')
    this.registration_typeDict('registration_type')

    this.routerMsg = this.$route.meta.title
  },
  methods: {
    addCompany(row, type) {
      if (type === 'see') {
        this.commonDataInfoDetail(row.id)
        this.seeForm = true
        this.dialogTitle = '查看企业共性数据'
      } else if (row.id) {
        this.dialogTitle = '编辑企业共性数据'
        this.commonDataInfoDetail(row.id)
      } else {
        this.dialogTitle = '新增企业共性数据'
      }

      this.dialogVisible = true
    },
    handleClose() {
      this.form = {
        enterpriseName: '',
        industryCategory: '',
        emergencySceneCode: '',
        areaCode: '',
        uniscId: '',
        opScope: '',
        productionMode: '',
        inIndustriaPark: '',
        administrativeSubOrdination: '',
        registrationType: '',
        longitude: '',
        addressOperating: '',
        legalRepresentative: '',
        latitude: '',
        safetyProductionManagementName: '',
        contactNumber: '',
        safetyProductionManagementNumber: '',
        companyScale: '',
        stopStatus: '',
      }
      this.pageList(this.params)
      this.seeForm = false
      this.dialogVisible = false
    },
    async industryCategoryDict(dictType) {
      const res = await dict({ dictType })
      this.industryCategoryList = res.data
    },
    async emergencySceneCodeDict(dictType) {
      const res = await dict({ dictType })
      this.emergencySceneCodeList = res.data
    },
    async areaDict() {
      const res = await areaDict()
      this.areaList = res.data
    },
    async business_statusDict(dictType) {
      const res = await dict({ dictType })
      this.business_statusList = res.data
    },
    async company_scaleDict(dictType) {
      const res = await dict({ dictType })
      this.company_scaleList = res.data
    },
    async production_modeDict(dictType) {
      const res = await dict({ dictType })
      this.production_modeList = res.data
    },
    async in_industry_parkDict(dictType) {
      const res = await dict({ dictType })
      this.in_industry_parkList = res.data
    },
    async administrative_subordinationDict(dictType) {
      const res = await dict({ dictType })
      this.administrative_subordinationList = res.data
    },
    async registration_typeDict(dictType) {
      const res = await dict({ dictType })
      this.registration_typeList = res.data
    },
    async stop_statusDict(dictType) {
      const res = await dict({ dictType })
      this.stop_statusList = res.data
    },
    async submitForm() {
      for (let k in this.form) {
        if (this.form[k] === '') {
          this.$message.warning('请先完善所有信息再提交')
          return
        }
      }
      const obj = { ...this.form, modeCode: 'S01' }
      if (this.form.id) {
        const res = await updateForm(JSON.stringify(obj))
        if (res.code === 1) {
          this.$message.success('编辑成功')
          this.handleClose()
        } else {
          this.$message.error('编辑失败')
        }
      } else {
        const res = await addForm(JSON.stringify(obj))
        if (res.code === 1) {
          this.$message.success('新增成功')
          this.handleClose()
        } else {
          this.$message.error('新增失败')
        }
      }
    },
    chooseAreaCode(e) {
      this.form.areaCode = e
    },
    resetSearch() {
      this.searchObj = {
        enterpriseName: '',
        emergencySceneCode: '',
        stopStatus: '',
        industryCategory: '',
        areaCode: '',
      }
      this.params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.pageList(this.params)
    },
    async pageList(params) {
      const res = await pageList(params)
      this.tableData = res.data.list
      this.totalItemCount = res.data.total
    },
    currentPage(pageNum) {
      this.pageList({
        pageNum: pageNum,
        pageSize: this.params.pageSize,
        enterpriseName: this.searchObj.enterpriseName,
        emergencySceneCode: this.searchObj.emergencySceneCode,
        stopStatus: this.searchObj.stopStatus,
        industryCategory: this.searchObj.industryCategory,
        areaCode: this.searchObj.areaCode,
      })
    },
    handleSizeChange(pageSize) {
      this.pageList({
        pageNum: this.params.pageNum,
        pageSize: pageSize,
        enterpriseName: this.searchObj.enterpriseName,
        emergencySceneCode: this.searchObj.emergencySceneCode,
        stopStatus: this.searchObj.stopStatus,
        industryCategory: this.searchObj.industryCategory,
        areaCode: this.searchObj.areaCode,
      })
    },
    async commonDataInfoDetail(id) {
      const res = await commonDataInfoDetail(id)
      this.form = res.data
    },
    searchList() {
      const obj = {
        ...this.searchObj,
        areaCode: this.searchObj.areaCode[this.searchObj.areaCode.length - 1],
        pageNum: 1,
        pageSize: 10,
      }
      this.pageList(obj)
    },
    goDetail(row) {
      console.log(row)
      const obj = {
        companyId: row.id,
        companyCode: row.identificationCode ? row.identificationCode : null,
        equipCompanyName: row.enterpriseName,
        areaCode: row.areaCode,
        enterpriseName: row.enterpriseName,
      }
      this.$router.push({
        path: '/corporatePersonalityData',
        query: obj,
      })
    },
    async exportGeneral() {
      const res = await exportCommonDataInfo()
      FileSaver.saveAs(res.data, '企业通用信息.xlsx')
      this.$message.success('企业通用信息资料导出成功')
    },
    async uploadExcel() {
      const res = await downloadTemplate()
      FileSaver.saveAs(res.data, '企业通用信息模版下载.xlsx')
      this.$message.success('企业通用信息模版下载成功')
    },
    async importGeneral(event) {
      const files = event.target.files
      if (files.length > 0) {
        const data = new FormData()
        data.append('file', files[0])
        const res = await uploadCommonDataInfo(data)
        if (res.data.code === 500) {
          this.$message.error(res.data.msg)
        } else {
          this.$message.success(res.data)
        }
      }
    },
  },

  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.routerMsg {
  padding: 20px;
  color: #999999;

  font-size: 14px;
}
.mainBox {
  width: 100%;
}
.container {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;

  padding: 20px 25px;
  .searchBox {
    display: flex;
    margin-bottom: 20px;
    .search1 {
      margin-right: 15px;
    }
    .searchBtn {
      .el-button {
        border: 1px solid #269e8f;
        color: #269e8f;
      }
      .reset {
        border: 1px solid #269e8f;
        color: #fff;
        background-color: #269e8f;
        margin-left: 20px;
      }
    }
  }
  .btnBox {
    display: flex;
    margin-bottom: 15px;
    .addBtn {
      margin-right: 20px;

      .el-button {
        background-color: #269e8f;
        border: 1px solid #269e8f;
      }
    }
    .uploadBtn {
      margin-right: 20px;
      .inputBox {
        height: 40px;
        display: block;
        line-height: 1;
        background-color: #269e8f;
        border: 1px solid #269e8f;
        color: #fff;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        text-align: center;
        box-sizing: border-box;
      }
    }
  }
  .footerPage {
    padding-top: 20px;
    text-align: right;
    padding-right: 30px;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2aa59e !important; // 进行修改选中项背景和字体
      color: #fff;
    }
    .totalNum {
      font-size: 14px;
      font-weight: normal;
      margin-right: 10px;
    }
  }
}

.dialogTitle {
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
  font-size: 20px;
  font-weight: 500;
  padding: 22px 0 19px 0;
}
::v-deep .el-dialog__header {
  padding: 0 30px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .leftCancel {
    margin-left: 77px;
    background-color: #269e8f;
    border: 1px solid #269e8f;
  }
}
.dialogForm {
  .formBox {
    .formItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .left {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    .right {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    ::v-deep .el-input {
      height: 30px;
      width: 260px;
    }
    ::v-deep .el-input__inner {
      height: 30px;
    }
    ::v-deep .el-input__suffix {
      height: 40px;
    }
  }
}
::v-deep.dialogCompany {
  border-radius: 20px;
}
</style>
